import React, { Component } from 'react'
import ReactDom from 'react-dom'
import './modal.scss'
export default class Modal extends Component {
    constructor(props){
        super(props)
        //1.创建自定义元素
        this.el = document.createElement('div');
    }
    componentDidMount(){
        //2.在组件挂载的时候加载到body上面
        document.body.appendChild(this.el)
    }
    componentWillUnmount(){
        //3.卸载元素
        document.body.removeChild(this.el)
    }
    state = {
        isFromProps:true, //默认从props里面获取show值
        show:false
    }
    static getDerivedStateFromProps(nextProps,nextState){
        // console.log(nextProps);
        // console.log(nextState);
        //组件更新的时候
        if(nextState.isFromProps){
            return {
                show:nextProps.show
            }
        }else{
            return{
            isFromProps: true
            }
        }
    }
    handleclose =(params) => {
        this.setState({
            isFromProps:false,
            show:false
        })
    }
    render() {
        return (
            <div>
                {this.state.show &&
          ReactDom.createPortal(
            <div className="modal">
              <div className="modalHeader">
                <div className="left">标题</div>
                <div className="close" onClick={this.handleclose}>
                  X
                </div>
              </div>
              <div className="modalContent">
                {this.props.children}
              </div>
              <div className="modalFooter"></div>
            </div>,
            this.el
          )}
            </div>
        )
    }
}
